<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain>添加患者</el-button></el-col>
            <el-col :span="4"><el-input v-model="input" placeholder="姓名"  prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="180" align="center"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="date" label="住院日期" width="180" align="center" class="el-icon-time">
                 <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.date }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180" align="center"></el-table-column>
            <el-table-column prop="source" label="感染源" width="180" align="center"></el-table-column>
            <el-table-column label="操作"  align="center">
                <el-button plain size="mini" @click="showById">编辑</el-button>
                <el-button type="primary" plain size="mini">检测记录</el-button>
                <el-button type="primary" plain size="mini" @click="showCureDialog">治愈</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>

        <!-- Form -->
        <el-dialog title="治愈" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="治愈时间" :label-width="formLabelWidth">
            <el-input v-model="form.date" placeholder="请输入时间" suffix-icon="el-icon-date"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.desc" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      input: '',
      tableData: null,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogFormVisible: false,
        form: {
          date:'',
          desc: ''
        },
        formLabelWidth: '120px'
    }
  },
  created(){
      this.fetchData()
  },
  methods:{
      fetchData(){
          request({
              url: '../patient_list.json',
              method: 'get'
          }).then(response => {
              this.tableData = response.data
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      showById(){
          this.$router.push("/patient/modify")
      },
      showCureDialog(){
          this.dialogFormVisible="true"
      }
  }
}
</script>